<template>
  <div style="padding: 20px">
    <el-card shadow="never" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>基本信息</span>
      </div>
      <!-- card body -->
      <BaseForm
        labelWidth="160px"
        :inline="true"
        :fromIems="fromIems"
        ref="BaseForm"
        @submit="submit"
        @edit="edit"
      ></BaseForm>
    </el-card>
    <el-card
      shadow="never"
      :body-style="{ padding: '20px' }"
      style="margin-top: 16px"
    >
      <div slot="header">
        <span>商品明细</span>
      </div>
      <vxe_table
        ref="Cx_table"
        :options="options"
        @handleTableBtn="handleTableBtn"
      >
        <template #btn>
          <el-button type="success" size="small" @click="add">添加</el-button>
        </template>

        <template #search="{ row, index }">
          <SearchPoduct
            :ref="'SearchPoduct' + index"
            v-model="row.code"
            @input="handleSetRowData"
            :index="index"
          ></SearchPoduct>
        </template>
        <template #nums="{ row }">
          <el-input-number
            v-model="row.nums"
            placeholder=""
            clearable
          ></el-input-number>
        </template>
        <template #price="{ row }">
          <el-input-number
            v-model="row.price"
            placeholder=""
            clearable
            :step="0.1"
            :max="100000"
            :min="0.0"
          ></el-input-number>
        </template>
        <template #remark="{ row }">
          <el-input type="textarea" v-model="row.remark" clearable></el-input>
        </template>
      </vxe_table>
    </el-card>
    <el-button type="primary" size="default" @click="handlesubmit"></el-button>
  </div>
</template>

<script>
import SearchPoduct from "@/components/select/searchPoduct.vue";
import Cx_table from "@/components/table/cx_table.vue";
import tableMixin from "@/mixins";
import { province } from "@/utils/json/province";
import { city } from "@/utils/json/city";
import { country } from "@/utils/json/country";
export default {
  mixins: [tableMixin],
  components: {
    Cx_table,
    SearchPoduct,
  },
  data() {
    return {
      selectedOption: "null",
      fromIems: [
        {
          valueType: "select",
          label: "订单类型",
          dataIndex: "currencyName",
          options: [
            {
              label: "共享订单",
              value: 1,
            },
            {
              label: "新品订单",
              value: 2,
            },
            {
              label: "二手订单",
              value: 3,
            },
            {
              label: "配件订单",
              value: 4,
            },
          ],
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "input",
          label: "订单号",
          dataIndex: "currencyName",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },

        {
          valueType: "date",
          label: "开单日期",
          dataIndex: "tme",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "select",
          label: "开单人",
          dataIndex: "a",
          options: [],
          search: true,
          searchFn: (query) => {
            console.log(query, "---");
          },
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "select",
          label: "客户名称",
          dataIndex: "name",
          options: [],
          search: true,
          searchFn: (query) => {
            console.log(query, "---");
          },
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "date",
          label: "交货日期",
          dataIndex: "jh",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "switch",
          label: "是否含税",
          dataIndex: "sp",
          props: {
            activeText: "是",
            inactiveText: "否",
          },
          onChange: (e) => {
            console.log(e);
          },
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "inputNumber",
          label: "税点",
          dataIndex: "sd",
          hide: (data) => {
            return data.sp == true;
          },
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "inputNumber",
          label: "不含税金额",
          dataIndex: "sd",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "inputNumber",
          label: "含税金额",
          dataIndex: "sd",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "inputNumber",
          label: "税金",
          dataIndex: "sd",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "inputNumber",
          label: "服务费",
          dataIndex: "sd",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "date",
          label: "起租日期",
          dataIndex: "jh",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "date",
          label: "租止日期",
          dataIndex: "jh",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "inputNumber",
          label: "运费",
          dataIndex: "sd",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "switch",
          label: "是否开发票",
          dataIndex: "sp",
          props: {
            activeText: "是",
            inactiveText: "否",
          },
          onChange: (e) => {
            console.log(e);
          },
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "switch",
          label: "是否加急",
          dataIndex: "sp",
          props: {
            activeText: "是",
            inactiveText: "否",
          },
          onChange: (e) => {
            console.log(e);
          },
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "input",
          label: "收货人",
          dataIndex: "currencyName",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "input",
          label: "物流公司",
          dataIndex: "currencyName",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "input",
          label: "物流单号",
          dataIndex: "currencyName",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "input",
          label: "收货电话",
          dataIndex: "currencyName",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType:'select',
          label:'省',
          dataIndex:'shen',
          options:province,
          onChange:(e)=>this.handleChanheShen(e)
        },
        {
          valueType:'select',
          label:'市',
          dataIndex:'shi',
          options:[],
          onChange:(e)=>this.handleChanheCity(e)
        },
        {
          valueType:'select',
          label:'区',
          dataIndex:'qu',
          options:[]
        },
        {
          valueType: "input",
          type: "textarea",
          label: "详细地址",
          dataIndex: "currencyName",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "input",
          label: "备注",
          dataIndex: "currencyName",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
      ],
      options: {
        id: "add",
        hideSearch: true,
        hideExport: true,
        columns: [
          { field: "seq", type: "seq", title: "排序" },
          { field: "type", title: "商品型号", slot: "search" },
          { field: "name", title: "商品名称" },
          { field: "nums", title: "商品数量", slot: "nums" },
          { field: "price", title: "服务费", slot: "price" },
          { field: "remark", title: "备注", slot: "remark" },
        ],
        btn: [
          {
            title: "删除",
            handleName: "handleDel",
            type: "danger",
          },
        ],
      },
    };
  },
  mounted() {
    let arr = [
      {
        code: 1,
        type: "x01",
        name: "商品1",
        price: 40.0,
        remark: "备注2",
        nums: 22,
      },
      {
        code: 3,
        type: "x01",
        name: "商品1",
        price: 30.0,
        remark: "备注1",
        nums: 11,
      },
    ];
    this.$refs.Cx_table.tableData = arr;
    arr.forEach((el, index) => {
      setTimeout(() => {
        this.$refs[`SearchPoduct${index}`].remoteMethod(el.name);
      }, 500);
    });

    setTimeout(()=>{
      this.$set(this.$refs.BaseForm.form, 'shen', '130000000000')
      this.$set(this.$refs.BaseForm.form, 'shi', '130100000000')
      this.$set(this.$refs.BaseForm.form, 'qu', '130102000000')
      this.handleChanheShen('130000000000')
      this.handleChanheCity('130100000000')
    },500)
  },
  methods: {
    handleChanheShen(e){
      const a =  this.fromIems.find(el=>el.dataIndex=='shi')
      if(e){
        a.options  = city[e]
      }else{
        a.options = []
      }
     
    },
    handleChanheCity(e){
      const a =  this.fromIems.find(el=>el.dataIndex=='qu')
      if(e){
        a.options  = country[e]

      }else{
        a.options = []

      }
    },
    submit() {},
    edit() {},
    add() {
      this.$refs.Cx_table.tableData.push({
        code: null,
        type: null,
        name: null,
        price: 1.0,
        remark: null,
        nums: 20,
      });
    },
    handleSetRowData(val, row, index) {
      console.log(val, row, index, "组件返回值-----------------");
      console.log(
        this.$refs.Cx_table.tableData,
        "表格数据xxxxxxxxxxxxxxxxxxxxxxxxxx"
      );
      this.$refs.Cx_table.tableData[index].type = row.type;
      this.$refs.Cx_table.tableData[index].name = row.name;
    },
    handlesubmit() {
      console.log(this.$refs.BaseForm.formData);
      console.log(this.$refs.Cx_table.tableData);
    },
    handleDel(row, index) {
      console.log(row, index);
      this.$refs.Cx_table.tableData.splice(index, 1);
    },
  },
};
</script>
